<template>
  <div style="margin-left:10px">
    <el-form
      ref="passwordForm"
      :model="formPassword"
      :rules="passwordRules"
    >
      <el-form-item label="旧密码" prop="password">
        <el-input
          v-model="formPassword.password"
          type="password"
          autocomplete="off"
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="formPassword.newPassword"
          type="password"
          autocomplete="off"
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="repeatPassword">
        <el-input
          v-model="formPassword.repeatPassword"
          type="password"
          autocomplete="off"
          placeholder="请再次输入新密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">保存</el-button>
        <el-button size="mini" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { MessageBox } from 'element-ui'
import store from '@/store'
import { default as request, cloud } from '@/framework/utils/request'
import basicData from '@/framework/api/userCenter/basicData'
import { encryption } from 'DQBasic-vue-component'

export default {
  name: 'DtUpdatePw',
  data() {
    // 原始密码的校验规则
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback('请输入旧密码')
      } else {
        callback()
      }
    }
    // 对新密码进行自定义验证
    const validateNewPwd = (rule, value, callback) => {
      if (!value) {
        callback('请输入新密码')
      } else if (this.pwdreg.test(value) === false) {
        callback(this.pwdregcon)
      } else {
        callback()
      }
    }
    // 确认密码校验
    const validateConfirmPwd = (rule, value, callback) => {
      if (!value) {
        callback('请再次输入新密码')
      } else if (value !== this.formPassword.newPassword) {
        callback('两次密码输入不一致')
      } else {
        callback()
      }
    }
    return {
      pwdreg: '',
      pwdregcon: '',
      formPassword: {
        password: '',
        newPassword: '',
        repeatPassword: ''
      },
      passwordRules: {
        password: [
          { required: true, validator: validatePassword, trigger: 'change' }
        ],
        newPassword: [
          { required: true, validator: validateNewPwd, trigger: 'change' }
        ],
        repeatPassword: [
          { required: true, validator: validateConfirmPwd, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 获取密码策略
    async getPwdRole() {
      const { data } = await basicData.getPwdRules()
      this.pwdrole = data
      this.pwdreg = new RegExp(this.pwdrole.pwdRegularExpression)
      this.pwdregcon = this.pwdrole.pwdRgDescribe
    },
    onCancel() {
      this.resetForm('passwordForm')
      this.$emit('cancel', false)
    },
    onSubmit() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },
    submit() {
      const formPassword = encryption({
        data: this.formPassword
      })
      request({
        url: `${cloud.usercenter}/sysUser/updatePassword`,
        method: 'post',
        data: formPassword,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then((res) => {
        if (res.code === '00000') {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          MessageBox.alert('您的密码已修改，请重新登录。', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          }).then(() => {
            store.dispatch('user/resetToken').then(() => {
              location.reload()
            })
          }).catch(() => {
            store.dispatch('user/resetToken').then(() => {
              location.reload()
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: `修改失败:${res.message}`
          })
        }
      })
    }
  }
}
</script>
<style scoped>
::v-deep .el-input--medium{
  margin-top:8px
}
::v-deep .el-form-item__content{
  width: 324px;
}
</style>
